<template>
  <div class="timer-view">
    <AppHeader title="计时器" />

    <div class="timer-header">
      <div class="timer-tabs">
        <span 
          :class="['tab', { active: mode === 'pomodoro' }]" 
          @click="mode = 'pomodoro'"
        >
          番茄计时
        </span>
        <span 
          :class="['tab', { active: mode === 'normal' }]" 
          @click="mode = 'normal'"
        >
          正计时
        </span>
      </div>
      <div class="header-buttons">
        <el-button 
          v-if="mode === 'pomodoro'"
          circle
          class="setting-button"
          @click="showTimerSettings = true"
        >
          <el-icon><Timer /></el-icon>
        </el-button>
        <el-button 
          circle 
          class="add-button"
          @click="showFocusInput = true"
        >
          <el-icon><Plus /></el-icon>
        </el-button>
      </div>
    </div>

    <div class="focus-text" v-if="currentFocus">
      专注：{{ currentFocus }}
    </div>

    <div class="timer-circle">
      <div class="time-display">{{ formatTime }}</div>
      <div v-if="mode === 'pomodoro' && !isRunning" class="selected-duration">
        已选择：{{ pomodoroMinutes }}分钟
      </div>
      <div class="timer-controls">
        <el-button 
          type="primary" 
          round 
          :disabled="isRunning"
          @click="startTimer"
        >
          开始
        </el-button>
        <el-button 
          v-if="isRunning"
          type="danger" 
          round 
          @click="stopTimer"
        >
          停止
        </el-button>
        <el-button 
          v-if="!isRunning && seconds > 0"
          type="warning" 
          round 
          @click="resetTimer"
        >
          重置
        </el-button>
      </div>
    </div>

    <!-- 时长设置弹窗 -->
    <el-dialog
      v-model="showTimerSettings"
      title="设置番茄时钟时长"
      width="90%"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <div class="timer-settings">
        <div class="preset-times">
          <el-button 
            v-for="time in presetTimes" 
            :key="time"
            :type="tempPomodoroMinutes === time ? 'primary' : ''"
            @click="selectDuration(time)"
          >
            {{ time }}分钟
          </el-button>
        </div>
        <div class="custom-time">
          <el-input-number 
            v-model="tempPomodoroMinutes" 
            :min="1" 
            :max="120"
            size="small"
            placeholder="自定义时长"
            @change="handleCustomDuration"
          >
            <template #suffix>分钟</template>
          </el-input-number>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelSettings">取消</el-button>
          <el-button type="primary" @click="confirmTimerSettings">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加专注任务对话框 -->
    <el-dialog
      v-model="showFocusInput"
      title="添加专注任务"
      width="90%"
    >
      <el-form>
        <el-form-item>
          <el-input v-model="focusInput" placeholder="请输入专注内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showFocusInput = false">取消</el-button>
        <el-button type="primary" @click="setFocus">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { Plus, Timer } from '@element-plus/icons-vue'
import AppHeader from '../components/AppHeader.vue'

export default {
  name: 'TimerView',
  components: {
    Plus,
    Timer,
    AppHeader
  },
  setup() {
    const mode = ref('normal')
    const seconds = ref(0)
    const isRunning = ref(false)
    const timer = ref(null)
    const showFocusInput = ref(false)
    const focusInput = ref('')
    const currentFocus = ref('')
    const pomodoroMinutes = ref(25)
    const showTimerSettings = ref(false)
    const tempPomodoroMinutes = ref(25)
    const presetTimes = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60]

    const formatTime = computed(() => {
      const minutes = Math.floor(seconds.value / 60)
      const remainingSeconds = seconds.value % 60
      return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
    })

    const selectDuration = (time) => {
      tempPomodoroMinutes.value = time
    }

    const handleCustomDuration = (value) => {
      tempPomodoroMinutes.value = value
    }

    const confirmTimerSettings = () => {
      pomodoroMinutes.value = tempPomodoroMinutes.value
      if (mode.value === 'pomodoro' && !isRunning.value) {
        seconds.value = pomodoroMinutes.value * 60
      }
      showTimerSettings.value = false
    }

    const cancelSettings = () => {
      tempPomodoroMinutes.value = pomodoroMinutes.value
      showTimerSettings.value = false
    }

    const startTimer = () => {
      if (mode.value === 'pomodoro') {
        seconds.value = pomodoroMinutes.value * 60
      }
      isRunning.value = true
      timer.value = setInterval(() => {
        if (mode.value === 'normal') {
          seconds.value++
        } else {
          if (seconds.value > 0) {
            seconds.value--
          } else {
            stopTimer()
            // 可以添加提示音或通知
          }
        }
      }, 1000)
    }

    const stopTimer = () => {
      if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
      }
      isRunning.value = false
    }

    const resetTimer = () => {
      stopTimer()
      seconds.value = 0
    }

    const setFocus = () => {
      if (focusInput.value.trim()) {
        currentFocus.value = focusInput.value
        focusInput.value = ''
        showFocusInput.value = false
      }
    }

    return {
      mode,
      seconds,
      isRunning,
      formatTime,
      showFocusInput,
      focusInput,
      currentFocus,
      pomodoroMinutes,
      showTimerSettings,
      tempPomodoroMinutes,
      presetTimes,
      startTimer,
      stopTimer,
      resetTimer,
      setFocus,
      confirmTimerSettings,
      cancelSettings,
      selectDuration,
      handleCustomDuration
    }
  }
}
</script>

<style lang="scss" scoped>
.timer-view {
  padding: 15px;
  padding-top: 60px; /* Add padding for the fixed header */
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;

  .timer-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 20px;

    .timer-tabs {
      flex: 1;
      display: flex;
      justify-content: center;
      background: #fff;
      border-radius: 20px;
      padding: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
      margin: 0 20px;
      white-space: nowrap;

      .tab {
        padding: 8px 20px;
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #606266;
        white-space: nowrap;

        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }

    .header-buttons {
      display: flex;
      gap: 10px;
    }
  }

  .timer-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid #dcdfe6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

    .time-display {
      font-size: 48px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 10px;
    }

    .selected-duration {
      font-size: 14px;
      color: #909399;
      margin-bottom: 20px;
    }

    .timer-controls {
      display: flex;
      gap: 10px;

      .el-button {
        min-width: 80px;
      }
    }
  }

  .timer-settings {
    padding: 20px;

    .preset-times {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 10px;
      margin-bottom: 20px;

      .el-button {
        width: 100%;
      }
    }

    .custom-time {
      display: flex;
      justify-content: center;

      .el-input-number {
        width: 120px;
      }
    }
  }

  .focus-text {
    margin-bottom: 30px;
    font-size: 18px;
    color: #409eff;
  }
}

:deep(.el-dialog) {
  border-radius: 12px;
  
  .el-dialog__header {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #dcdfe6;
  }
  
  .el-dialog__body {
    padding: 15px;
  }
  
  .el-dialog__footer {
    padding: 10px 15px;
    border-top: 1px solid #dcdfe6;
  }
}
</style> 